<template>
  <div class="app-container">
    <el-row :gutter="20" >
      <!--部门数据-->
      <el-col :span="4" :xs="24" >
        <div class="head-container" style="margin-top: 5px;max-height: 660px; overflow: auto;">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            :highlight-current="true"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">

        <div class="">
          <el-form :model="queryParams" ref="queryForm" :inline="true"   >
            <el-form-item label="物料编码" >
              <el-input
                v-model="queryParams.mNo"
                placeholder="请输入物料编码"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="物料名称" >
              <el-input
                v-model="queryParams.mName"
                placeholder="请输入物料名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item >
              <el-button size="mini" type="warning" icon="el-icon-upload" @click="handleExport">导出</el-button>
              <el-button  type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-upload
                style="float: right;margin-left:10px;"
                :headers="headers"
                accept=".xlsx, .xls"
                :show-file-list="false"
                :action="baseUrl()+'/material/supplies/excels'"
                :on-success="toLeadSuccess"
              >
                <el-button size="mini" type="info" icon="el-icon-upload">导入</el-button>
              </el-upload>
            </el-form-item>


          </el-form>
          <el-table v-loading="loading"  v-show="anquanShow" :data="deviceTypeList" border>
            <el-table-column label="序号" type="index" width="55" align="center" />
            <el-table-column align="center" label="科室" property="depOffName"   ></el-table-column>
            <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true"  ></el-table-column>
            <el-table-column align="center" label="物料名称"  property="mname"  ></el-table-column>
            <el-table-column align="center" label="物料规格"  property="mmodel"  ></el-table-column>
            <el-table-column align="center" label="分类名称"  property="typeName" :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column align="center" label="单位"  property="unit"  ></el-table-column>
            <el-table-column align="center" label="计划价"  property="planPrice"  ></el-table-column>
            <el-table-column align="center" label="技术参数"  property="technicalParameters" :show-overflow-tooltip="true" v-if="false"></el-table-column>
            <el-table-column align="center" label="物料状态"  property="mtype" :show-overflow-tooltip="true" width="150" v-if="false" >
              <template slot-scope="scope" style="text-align: center" v-show="false">
                <div style="padding-left: 5px;padding-right: 5px; background:#78BF34  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='1'" >招标采购</div>
                <div style="padding-left: 5px;padding-right: 5px; background:#9E71DC ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='2'">产业协同</div>
                <div style="padding-left: 5px;padding-right: 5px;background:#DEA11E  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='3'">战略采购</div>
                <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='4'">询比价</div>
                <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='5'">长协</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="采购方式"  property="purchasingMethod" :show-overflow-tooltip="true" width="100" v-if="false">
              <template slot-scope="scope" style="text-align: center" v-show="false">
                <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='1'" >正常</div>
                <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='2'">慎用</div>
                <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='3'">关闭</div>
                <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='4'">新增</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="库存"  property="inventory"  > </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="修改库存"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="400px">
      <el-form :model="xzParams" ref="xzParams" :inline="true">
        <el-input
          v-model="xzParams.inventory"
          placeholder="请输入库存数量"
          type="number"
          size="small"
        />
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button   size="mini" @click="dialogVisible = false">取 消</el-button>
    <el-button   size="mini" type="primary" @click="xiugaiBtn">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import request from '@/utils/request'
  import { listDeviceType, getDeviceType, delDeviceType, addDeviceType, updateDeviceType, exportDeviceType } from "@/api/device/deviceType";
  import { getToken } from "@/utils/auth";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { importTemplate } from "@/api/suppliesLLGL/inventoryGL";
  export default {
    name: "User",
    components: { Treeselect },
    data() {
      return {
        headers: { Authorization: "Bearer " + getToken()},
        xzParams:{
          id:'',
          waId:'',
          inventory:''
        },
        reportData:[],
        dialogVisible:false,
        name:'修改库存',
        anquanShow:true,//安全库存预警展示
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 设备类型表表格数据
        deviceTypeList: [ ],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //类型数据
        lllxArr:[
          {value:'1',label:'安全库存预警'},
          {value:'2',label:'库存预测预警'}
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          mNo: '',
          mName:'',
          waId: ''
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        // 部门树选项
        deptOptions: undefined,
        // 部门名称
        deptName: undefined,
        // 状态数据字典
        statusOptions: [],
        defaultProps: {
          children: "childList",
          label: "wname"
        },
        leixng:'post',
        messageData:'新增成功',
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/material/supplies/excels"
        },
      };

    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        console.log(val)
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getList();
      this.getTreeselect();
    },
    methods: {
      toLeadSuccess(res){
        if(res.code==200){
          this.$message.success('导入成功！');
          this.getList()
        }else{
          this.$message.success(res.msg);
        }
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate().then(response => {
          this.download(response.msg);
        });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "物资导入";
        this.upload.open = true;
      },
      handleNodeClickSJ:function(node){
        console.log(node,'node')
        this.xzParams.pid = node.id
        this.queryParams.waId = node.id
        this.xzParams.wnameSJ = node.wname
        this.$refs.selectReport.blur()
        console.log(this.xzParams.wname,"this.welcomeReport.reportName")
      },
      /** 导出按钮操作 */
      handleExport() {
        request({
          url: '/material/supplies/listInventoryHistoryExport',
          method: 'get',
          params:this.queryParams
        }).then(response => {
          this.download(response.data);//data直接返回的是文件名
        });
      },
      //导出
      export:function(){
        request({
          url: '/system/classification/export',
          method: 'get',
          params: this.xzParams
        }).then(response => {
          this.getList()
        });
      },
      //修改确定
      xiugaiBtn:function(){
        if(!this.xzParams.inventory){
          this.$message({
            type: 'warning',
            message: '库存数量不能为空'
          });
          return

        }
        request({
          url: '/system/suppliesWarehousea',
          method: this.leixng,
          data:this.xzParams
        }).then(response => {
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: this.messageData
          });
          this.handleQuery()
        });
      },
      //修改
      handleEdit:function(index,row){
        debugger
        this.xzParams.id = row.id
        this.xzParams.waId = row.waId
        this.xzParams.inventory = row.inventory
        this.leixng = 'put'
        this.name="修改库存"
        this.messageData=  '修改成功'
        this.dialogVisible = true
      },
      //删除
      handleDelete:function (index,row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shanchu(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu:function(id){
        request({
          url: '/system/warehouse/' + id.id,
          method: 'delete',
        }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList()
          this.getTreeselect()
        });
      },

      //类型监听事件
      leixingChange:function(row){
        console.log(row)
        if(row==1){
          this.anquanShow = true
        }else {
          this.anquanShow = false
        }
      },
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        request({
          url: '/material/supplies/listInventory',
          method: 'get',
          params:this.queryParams
        }).then(response => {
          this.loading = false;
          this.deviceTypeList = response.rows
          this.total = response.total
        });
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        request({
          url: '/system/warehouse/listTree',
          method: 'get',
        }).then(response => {
          this.deptOptions = response.data;
          this.reportData =  response.data;
          console.log('成功',response.data)
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        console.log('11',data)
        this.xzParams.wnameSJ = data.wname
        this.queryParams.waId = data.id;
        this.getList();
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deviceCode: undefined,
          deviceName: undefined,
          parentId: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        console.log('this.queryParams',this.queryParams)
        this.queryParams.pageNum = 1;
        this.getList();
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加设备类型表";
      },
      /** 采购 */
      handleUpdate(row) {
        this.$router.push({path:'/purchaseGL/cgsqAdd',query:{data:row}});
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateDeviceType(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addDeviceType(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },

    }
  };
</script>
